import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
class MSSelectTimeView extends StatefulWidget{
  final void Function(String? value) onSelected;
  const MSSelectTimeView({super.key, required this.onSelected});

  @override
  State<StatefulWidget> createState() {
    return _MSSelectTimeViewState();
  }

}

class _MSSelectTimeViewState extends State<MSSelectTimeView>{
  int hour = 0;
  int minute = 0;

  @override
  Widget build(BuildContext context) {
    return Container(height: 375.w + ScreenUtil().bottomBarHeight,width: double.infinity,
    padding: EdgeInsets.only(left: 18.w,right: 18.w,bottom: ScreenUtil().bottomBarHeight),
    decoration: const BoxDecoration(
      color: Color(0xFF7DC97E)
    ),
      child: Column(
        children: [
          Container(width: double.infinity,height: 50.w,
            decoration: BoxDecoration(
              border:Border(
                bottom: BorderSide(width: 1.w, color: Color(0x33000000),
              )
              )
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              InkWell(onTap:(){
                widget.onSelected(null);
                Navigator.of(context).pop();

              }, child: Image.asset("images/home-close.png",width: 25.w,fit: BoxFit.fitWidth,),),
              Text("Time",style: TextStyle(
                fontSize: 20.sp,
                fontWeight: FontWeight.bold,
                color: Colors.white
              ),),
              InkWell(onTap: (){
                widget.onSelected(hour.toString().padLeft(2,"0") +":"+ minute.toString().padLeft(2,"0"));
                Navigator.of(context).pop();
              }, child: Image.asset("images/home-confirm.png",width: 25.w,fit: BoxFit.fitWidth,),),

            ],
          ),),
          Expanded(child: Stack(
            children: [
              Align(alignment: Alignment.center,child: DecoratedBox(
                decoration: BoxDecoration(
                    border:Border(
                        bottom: BorderSide(width: 1.w, color: Color(0x33000000),

                        ),
                      top: BorderSide(width: 1.w, color: Color(0x33000000),)
                    )
                ),
                child: Padding(
                  padding: EdgeInsets.symmetric(vertical: 5.w),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Container(width: 30.w,height: 30.w,decoration: BoxDecoration(
                          color: Color(0xFF148857),
                          borderRadius: BorderRadius.circular(5.w)
                      ),),
                      SizedBox(width: 8.w,),
                      Container(width: 30.w,height: 30.w,decoration: BoxDecoration(
                          color: Color(0xFF148857),
                          borderRadius: BorderRadius.circular(5.w)
                      ),),
                      Container(width: 31.w,alignment:Alignment.center, child: Text(":",style: TextStyle(
                        fontSize: 25.sp,color: Colors.white,
                        fontWeight: FontWeight.bold
                      ),),),
                      Container(width: 30.w,height: 30.w,decoration: BoxDecoration(
                          color: Color(0xFF148857),
                        borderRadius: BorderRadius.circular(5.w)
                      ),),
                      SizedBox(width: 8.w,),
                      Container(width: 30.w,height: 30.w,decoration: BoxDecoration(
                          color: Color(0xFF148857),
                          borderRadius: BorderRadius.circular(5.w)
                      ),),
                    ],
                  ),
                ),
              ),),
              Positioned.fill(child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
                SizedBox(width: 68.w,height: double.infinity,child: ListWheelScrollView.useDelegate(
                  itemExtent: 40.w,
                  diameterRatio:10,
                  onSelectedItemChanged: (int index){
                    hour = index +1;
                  },
                  physics: FixedExtentScrollPhysics(),
                  childDelegate: ListWheelChildBuilderDelegate(
                      builder: (context, index) {
                        return Padding(padding: EdgeInsets.symmetric(vertical: 5.w),child: Row(
                          children: [
                            Container(child: Text((index).toString().padLeft(2,"0").split("")[0],style: TextStyle(fontSize: 25.sp,color: Color(0xFFFFFFFF),fontWeight: FontWeight.bold),), width: 30.w,height: 30.w,alignment: Alignment.center,decoration: BoxDecoration(borderRadius: BorderRadius.circular(5.w))),
                            SizedBox(width: 8.w,),
                            Container(child: Text((index).toString().padLeft(2,"0").split("")[1],style: TextStyle(fontSize: 25.sp,color: Color(0xFFFFFFFF),fontWeight: FontWeight.bold)),width: 30.w,height: 30.w,alignment: Alignment.center,decoration: BoxDecoration(borderRadius: BorderRadius.circular(5.w))),

                          ],
                        ),);
                      },
                      childCount: 24),
                ),),
                SizedBox(width: 31.w,),
                SizedBox(width: 68.w,height: double.infinity,child: ListWheelScrollView.useDelegate(
                  itemExtent: 40.w,
                  diameterRatio:10,
                  onSelectedItemChanged: (int index){
                    minute = index;
                  },
                  physics: FixedExtentScrollPhysics(),
                  childDelegate: ListWheelChildBuilderDelegate(
                      builder: (context, index) {
                        return Padding(padding: EdgeInsets.symmetric(vertical: 5.w),child: Row(
                          children: [
                            Container(child: Text((index).toString().padLeft(2,"0").split("")[0],style: TextStyle(fontSize: 25.sp,color: Color(0xFFFFFFFF),fontWeight: FontWeight.bold)),width: 30.w,height: 30.w,alignment: Alignment.center,decoration: BoxDecoration(borderRadius: BorderRadius.circular(5.w)),),
                            SizedBox(width: 8.w,),
                            Container(child: Text((index).toString().padLeft(2,"0").split("")[1],style: TextStyle(fontSize: 25.sp,color: Color(0xFFFFFFFF),fontWeight: FontWeight.bold)),width: 30.w,height: 30.w,alignment: Alignment.center,decoration: BoxDecoration(borderRadius: BorderRadius.circular(5.w))),

                          ],
                        ),);
                      },
                      childCount: 60),
                ),)
              ],))
            ],
          ))
        ],
      ),
    );
  }

}